<template>
  <el-dialog :title="title" :visible.sync="dialogFormVisible" width="500px" @close="close" append-to-body>
    <el-descriptions title="反馈要求" :column="1" size="medium" border labelStyle="width:100px;">

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-chat-dot-square"></i>
          警情内容
        </template>
        <el-input v-model.trim="dataStr.warning_order_content" type="textarea" :rows="5" disabled></el-input>

      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-chat-dot-square"></i>
          反馈要求
        </template>
        {{ dataStr.feedback_require }}
      </el-descriptions-item>

      <el-descriptions-item v-if="filesListOrder.length > 0">
        <template slot="label">
          <i class="el-icon-download"></i>
          附件下载
        </template>
        <el-upload ref="uploadPicture" class="upload-demo" action="" :auto-upload="false" :on-preview="handlePreview"
                   :multiple="true" disabled :file-list="filesListOrder"></el-upload>
      </el-descriptions-item>


    </el-descriptions>
    <el-descriptions class="margintop" title="反馈内容" :column="1" size="medium" border labelStyle="width:100px;"
      v-if="dataStr.coordination_status != 0 || dataStr.is_reject == 0">
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-tickets"></i>
          反馈描述
        </template>
        {{ dataStr.feedback_desc == null ? '' : dataStr.feedback_desc }}
      </el-descriptions-item>
      <el-descriptions-item v-if="filesSize > 0">
        <template slot="label">
          <i class="el-icon-download"></i>
          附件下载
        </template>
        <el-upload ref="uploadPicture" class="upload-demo" action="" :auto-upload="false" :on-preview="handlePreview"
          :multiple="true" disabled :file-list="filesList"></el-upload>
      </el-descriptions-item>
      <el-descriptions-item v-if="dataStr.coordination_status == 2">
        <template slot="label">
          <i class="el-icon-finished"></i>
          得分
        </template>
        {{ dataStr.point == null ? '0' : dataStr.point }}
      </el-descriptions-item>
      <el-descriptions-item  v-if="dataStr.deptDeductPointList.length > 0">
        <template slot="label">
          <i class="el-icon-download"></i>
          扣分项
        </template>
        <el-tag type="warning"  v-for="item in dataStr.deptDeductPointList"
                :key="item"
                >{{item}}</el-tag>
      </el-descriptions-item>
    </el-descriptions>


    <h4 class="title-h4" v-if="appendInfo.length > 0">追加反馈</h4>
    <el-collapse  v-if="appendInfo.length > 0">

      <el-collapse-item v-for="item in appendInfo" :key="item.id">
        <template slot="title">
          <i class="el-icon-date"></i>{{item.create_time}}
        </template>
        <div class="feedback-item">
          <span class="feed-title">追加描述：</span>
          <div class="feed-des feed-text">{{item.append_desc}}</div>
        </div>
        <div class="feedback-item" v-if="item.files.length > 0">
          <span class="feed-title">追加附件：</span>
          <div class="feed-des">
            <el-upload ref="uploadPicture" class="upload-demo" action="" :auto-upload="false" :on-preview="handlePreview"
                       :multiple="true" disabled :file-list="item.files"></el-upload>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>

    <div slot="footer" class="dialog-footer" style="text-align:center;">
      <el-button @click="close">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { detalisWOD, download } from '@/api/warningOrderDept'
import {getOneFile} from "@/api/warningOrder";
import {getInfoList} from "@/api/appendInfo";
export default {
  name: 'fkview',
  data() {
    return {
      queryForm: {
        id: ''
      },
      title: '',
      dialogFormVisible: false,
      dataStr: [],
      filesList: [],
      filesSize: 0,
      filesListOrder: [],
      appendInfo:[],
    }
  },
  created() {

  },
  methods: {
    showDia(row) {
      this.queryForm.id = row;
      if (!row) {
        this.title = '添加'
      } else {
        this.title = '详情'
      }
      this.dialogFormVisible = true
      this.fetchData();
      this.getInfo();
    },
    close() {
      this.dialogFormVisible = false
      this.filesListOrder = [];
    },
    handlePreview(file) {
      this.$baseSeeOrDown('请选择操作？', null, async () => {
        download(file.url).then((res) => {
          const url = window.URL.createObjectURL(new Blob([res]))
          const link = document.createElement('a')
          link.href = url
          link.setAttribute('download', file.name)
          document.body.appendChild(link)
          link.click()
        })
      },async () => {
        var fileName = file.name
        if (fileName.indexOf(".pdf") === -1 && fileName.indexOf(".jpg") === -1 && fileName.indexOf(".png") === -1 && fileName.indexOf(".jpeg") === -1){
          this.$baseMessage('此类型文件不支持预览', 'error')
        }else {
          let fileId = file.url;
          var x = {}
          x.id = fileId;
          getOneFile(x).then((res) => {
            window.open(res.data.file_path)
          })
        }
      })
    },
    async fetchData() {
      this.filesList = [];
      this.filesSize = 0;
      this.listLoading = true
      const { data } = await detalisWOD(this.queryForm)
      this.dataStr = data;
      //属性信息 附件
      if (this.dataStr.files) {
        this.dataStr.files.forEach((x) => {
          this.filesList.push({ name: x.file_name, url: x.id })
          this.filesSize++;
        })
      }
      //属性信息 附件
      if (data.order_files) {
        data.order_files.forEach((x) => {
          this.filesListOrder.push({ name: x.file_name, url: x.id })
        })
      }
    },
    getInfo(){
      var x = {}
      x.order_dept_id = this.queryForm.id
      getInfoList(x).then((res) => {
        this.appendInfo = res.data;
      })

    },
  },
}
</script>
<style lang="scss" scoped>
.margintop {
  margin-top: 15px;
}

::v-deep {
  .el-tag{
    margin-left: 0 !important;
    margin-right: 6px !important;
    margin-bottom: 6px;
  }
  .el-upload{display:none;}
  .el-descriptions__header {
    margin-bottom: 10px;

    .el-descriptions__title {
      font-size: 14px;
    }
  }
}

.title-h4{
  margin-top: 15px;
  margin-bottom: 10px;
  font-size: 14px;
  color: #303133;
}
::v-deep .el-collapse {
  border: 1px solid #ebeef5;
  padding: 0 14px;
}
::v-deep .el-collapse-item__header {
  height: 42px;
  line-height: 42px;
  color: #777;
}
.el-icon-date{
  margin-right: 5px;
}
.feedback-item {
  display: flex;

  .feed-title {
    width: 66px;
    text-align: right;
    margin-right: 2px;
    color: #909399;
    line-height: 34px;
  }

  .feed-des {
    flex: 1;
    color: #606266;
    line-height: 34px;

    &.feed-text {
      padding-top: 5px;
      line-height: 24px;
    }
  }
}
</style>

